<!-- 历史数据变更 -->
<template>
  <div class='dateChange'>
       <div>
         <Table ref="TableHeight" :max-height="onresizeHeight" :columns="columns" :data="data" ></Table>
       <!-- 分页 -->
        <div class="pagePublicStyle" v-show="pageData.total > 0">
          <div class="totalCount"> 当前第 {{ pageData.current }} 页， 当前第 {{ (pageData.current - 1) * pageData.rows + 1 }} 条到第
            {{ pageData.current * pageData.rows > pageData.total ? pageData.total : pageData.current * pageData.rows}}
            条， 共 {{ pageData.total }} 条
          </div>
          <Page :total="pageData.total" :current="pageData.current" :page-size-opts="pageData.pageSizeOpts"
            @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer
            show-total  />
        </div>
    </div>
  </div>
</template>

<script>

export default {
components: {},
data() {
return {
  onresizeHeight:0,
  pageData: {
    total: 2,
    current: 1,
    rows: 10,
    pageSizeOpts: [10, 20, 30, 40, 50],
  },
   columns:[
    {
      title: "序号",
      minWidth: 120,
      align:'center',
       render: (h, params) => {
         return h('div',params.row._index+1) 
       },
    },
    {
      title: "原字段",
      key: "oldName",
      minWidth: 120,
      align:'center'
    },
    {
      title: "现字段",
      key: "newName",
      minWidth: 120,
      align:'center'
    }, 
    {
      title: "说明",
      key: "explain",
      minWidth: 120,
      align:'center'
    },  
   ],
   data:[
       {
         oldName:"姓名",
         newName:"客户姓名",
         explain:"修改"
       }
   ]
};
},
computed: {},
watch: {},
methods: {
 initDate(){
  this.$nextTick(() => {
     this.onresizeHeight =window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 100;
  });
 },
 pageOnChangeFun(){

 },
 pageOnPageSizeChangeFun(){
     
 }
},
created() {
  this.initDate();
},
mounted() {
   window.onresize = () => {
      return (() => {
        setTimeout(() => {
          this.onresizeHeight =window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 150;
        }, 10);
      })();
    };
},
}
</script>
<style lang='scss' scoped>
 .pagePublicStyle{
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }
  .totalCount{
    float: left;
    line-height: 34px;
    padding-left: 20px;  
  }
</style>